<template>
  <div id="lib-favorite-header" :class="[windowIsFocus === 1 ? 'window-focus' : 'window-blur']">
    <div id="lib-favorite-header-logo">
      <el-icon :size="20">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
          <path
            d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96c-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54c-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16z"
            fill="currentColor"></path>
        </svg>
      </el-icon>
      <span>收藏夹</span>
    </div>
    <div id="lib-favorite-header-button-group">
      <el-button @click="handleSelection" :disabled="currentMap.size === 0" type="primary" size="small" link>
        <el-icon :size="24">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
            <g fill="none">
              <path
                d="M6.249 5.5a.75.75 0 0 0-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75h-7.5zM5.25 3A2.25 2.25 0 0 0 3 5.25v9.5A2.25 2.25 0 0 0 5.25 17h9.499a2.25 2.25 0 0 0 2.25-2.25v-9.5A2.25 2.25 0 0 0 14.749 3H5.25zM4.5 5.25a.75.75 0 0 1 .75-.75h9.499a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75v-9.5z"
                fill="currentColor"></path>
            </g>
          </svg>
        </el-icon>
      </el-button>
      <el-button @click="handleSelectAll" v-show="tableSelection && currentMap.size > 0" size="small" type="primary" link>
        <el-icon :size="24">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
            <g fill="none">
              <path
                d="M20.496 5.627A2.25 2.25 0 0 1 22 7.75v10A4.25 4.25 0 0 1 17.75 22h-10a2.25 2.25 0 0 1-2.123-1.504l2.097.004H17.75a2.75 2.75 0 0 0 2.75-2.75v-10l-.004-.051V5.627zM17.246 2a2.25 2.25 0 0 1 2.25 2.25v12.997a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 17.247V4.25A2.25 2.25 0 0 1 4.25 2h12.997zM13.47 7.47L9.58 11.358L8.6 10.05a.75.75 0 1 0-1.2.9l1.5 2a.75.75 0 0 0 1.13.08l4.5-4.5a.75.75 0 0 0-1.06-1.06z"
                fill="currentColor"></path>
            </g>
          </svg>
        </el-icon>
      </el-button>
      <el-button @click="handleBatchDelete" v-show="tableSelectAll || tableSelection && tableSelectSet.size > 0"
        type="danger" size="small" link>
        <el-icon :size="24">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
            <path
              d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
              fill="currentColor"></path>
          </svg>
        </el-icon>
      </el-button>
    </div>
  </div>
  <div id="lib-favorite-aside-tabs" :style="`height:${mainHeight}px;`">
    <div id="lib-favorite-aside-tabs-header">
      <div
        :class="[1 === currentTabIndex ? 'lib-favorite-aside-tabs-header-tab-active' : 'lib-favorite-aside-tabs-header-tab-hover', 'lib-favorite-aside-tabs-header-tab']"
        @click="handleSelectTab(1)" style="height:51.1px">
        <p class="lib-favorite-aside-tabs-header-tab-title">视频</p>
      </div>
      <div
        :class="[2 === currentTabIndex ? 'lib-favorite-aside-tabs-header-tab-active' : 'lib-favorite-aside-tabs-header-tab-hover', 'lib-favorite-aside-tabs-header-tab']"
        @click="handleSelectTab(2)" style="height:36.5px">
        <p class="lib-favorite-aside-tabs-header-tab-title">视频集</p>
      </div>
      <div
        :class="[3 === currentTabIndex ? 'lib-favorite-aside-tabs-header-tab-active' : 'lib-favorite-aside-tabs-header-tab-hover', 'lib-favorite-aside-tabs-header-tab']"
        @click="handleSelectTab(3)" style="height:51.1px">
        <p class="lib-favorite-aside-tabs-header-tab-title">图片</p>
      </div>
      <div
        :class="[4 === currentTabIndex ? 'lib-favorite-aside-tabs-header-tab-active' : 'lib-favorite-aside-tabs-header-tab-hover', 'lib-favorite-aside-tabs-header-tab']"
        @click="handleSelectTab(4)" style="height:29.2px">
        <p class="lib-favorite-aside-tabs-header-tab-title">文本</p>
      </div>
      <div
        :class="[5 === currentTabIndex ? 'lib-favorite-aside-tabs-header-tab-active' : 'lib-favorite-aside-tabs-header-tab-hover', 'lib-favorite-aside-tabs-header-tab']"
        @click="handleSelectTab(5)" style="height:36.5px">
        <p class="lib-favorite-aside-tabs-header-tab-title">文集</p>
      </div>
      <div
        :class="[6 === currentTabIndex ? 'lib-favorite-aside-tabs-header-tab-active' : 'lib-favorite-aside-tabs-header-tab-hover', 'lib-favorite-aside-tabs-header-tab']"
        @click="handleSelectTab(6)" style="height:36.5px">
        <p class="lib-favorite-aside-tabs-header-tab-title">音频</p>
      </div>
    </div>
    <div class="lib-favorite-aside-tab-pane">
      <div class="lib-favorite-table" :style="`height: ${mainHeight}px;`">
        <template v-for="(item, index) in currentMap.values()" :key="index">
          <div
            :class="[item.link ? 'lib-favorite-table-row-lock' : 'lib-favorite-table-row-hover', 'lib-favorite-table-row-box']">
            <div
              :class="[item.link ? 'lib-favorite-table-row-lock' : 'lib-favorite-table-row-hover', 'lib-favorite-table-row']"
              v-on:dblclick="indexNameDetail(item)">
              <span class="lib-favorite-table-row-main">
                <el-checkbox :model-value="tableSelectSet.has(item.id) || tableSelectAll" v-show="tableSelection"
                  size="small" @change="handleTableSelect(item.id)" />
                <n-ellipsis class="lib-favorite-table-row-value" :line-clamp="1">
                  {{ item.title }}
                </n-ellipsis>
              </span>
              <div class="lib-favorite-table-row-button-group">
                <el-button @click="handleOpenMeta(item.id)" size="small" link>
                  <el-icon :size="24">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 24 24">
                      <g fill="none">
                        <path
                          d="M4 4.5A2.5 2.5 0 0 1 6.5 2H18a2.5 2.5 0 0 1 2.5 2.5v14.25a.75.75 0 0 1-.75.75H5.5a1 1 0 0 0 1 1h13.25a.75.75 0 0 1 0 1.5H6.5A2.5 2.5 0 0 1 4 19.5v-15zM12.25 8a1 1 0 1 0 0-2a1 1 0 0 0 0 2zm-.75 1.75v5a.75.75 0 0 0 1.5 0v-5a.75.75 0 0 0-1.5 0z"
                          fill="currentColor"></path>
                      </g>
                    </svg>
                  </el-icon>
                </el-button>
                <el-button @click="handleRead(item.id)" v-if="item.type === 3 || item.type === 4 || item.type === 5"
                  type="success" style="color:rgb(0, 202, 75)" link size="small">
                  <el-icon :size="24">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 20 20">
                      <g fill="none">
                        <path
                          d="M10 16.137A2.742 2.742 0 0 1 8 17H3.75A1.75 1.75 0 0 1 2 15.25V4.75C2 3.784 2.784 3 3.75 3H8c.788 0 1.499.331 2 .863A2.742 2.742 0 0 1 12 3h4.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 16.25 17H12a2.742 2.742 0 0 1-2-.863zM3.5 4.75v10.5c0 .138.112.25.25.25H8c.69 0 1.25-.56 1.25-1.25v-8.5c0-.69-.56-1.25-1.25-1.25H3.75a.25.25 0 0 0-.25.25zm7.25 9.5c0 .69.56 1.25 1.25 1.25h4.25a.25.25 0 0 0 .25-.25V4.75a.25.25 0 0 0-.25-.25H12c-.69 0-1.25.56-1.25 1.25v8.5z"
                          fill="currentColor"></path>
                      </g>
                    </svg>
                  </el-icon>
                </el-button>
                <el-button @click="handleDeleteFavorite(item.favoriteId, item.id, item.title)" type="danger" size="small"
                  link>
                  <el-icon :size="24">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 24 24">
                      <path
                        d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
                        fill="currentColor"></path>
                    </svg>
                  </el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  beforeCreate() {
    window.electronAPI.windowBlur((_event, value) => {
      if (value === 0) this.windowIsFocus = 0
    })
    window.electronAPI.windowFocus((_event, value) => {
      if (value === 1) this.windowIsFocus = 1
    })
    window.onbeforeunload = () => {
      $MyLibWindowCommunication.close()
    }
  },
  created() {
    this.init()
  },
  beforeMount() {
    this.$nextTick(() => {
      this.mainHeight = document.body.offsetHeight - 33
      window.addEventListener('resize', () => {
        this.mainHeight = document.body.offsetHeight - 33
      })
    })
  },
  methods: {
    handleRead(indexId) {
      $MyLibWindowCommunication.sendToParent({ handle: 3, indexId: indexId })
    },
    handleOpenMeta(indexId) {
      $MyLibWindowCommunication.sendToParent({ handle: 1, indexId: indexId })
    },
    async init() {
      const favorites = await $MyLibDbc.favorite.getAll()
      for (const favorite of favorites) {
        const index = await $MyLibDbc.index.get(favorite.indexId)
        index.favoriteId = favorite.id
        switch (index.type) {
          case 1:
            this.videoMap.set(index.id, index)
            break;
          case 2:
            this.videoCollectMap.set(index.id, index)
            break;
          case 3:
            this.pictureMap.set(index.id, index)
            break;
          case 4:
            this.textMap.set(index.id, index)
            break;
          case 5:
            this.textCollectMap.set(index.id, index)
            break;
          case 6:
            this.audioMap.set(index.id, index)
            break;
        }
      }
    },
    handleDeleteFavorite(favoriteId, indexId, title) {
      $MyLibDbc.favorite.remove(favoriteId).then(() => {
        this.currentMap.delete(indexId)
        $MyLibWindowCommunication.sendToParent({ handle: 5, title: title })
      })
    },
    handleSelectTab(index) {
      this.currentTabIndex = index
      this.tableSelectAll = false
      this.tableSelectSet = new Set()
      this.tableSelection = false
    },
    handleSelectAll() {
      this.tableSelectAll = !this.tableSelectAll
    },
    handleSelection() {
      this.tableSelection = !this.tableSelection
    },
    handleTableSelect(indexId) {
      this.tableSelectSet.has(indexId) ? this.tableSelectSet.delete(indexId) : this.tableSelectSet.add(indexId)
    },
    async handleBatchDelete() {
      if (this.tableSelectAll) {
        const favoriteIds = new Set()
        const iterableIterator = this.currentMap.values()
        let next = iterableIterator.next()
        while (next.done === false) {
          favoriteIds.add(next.value.favoriteId)
          this.currentMap.delete(next.value.id)
          next = iterableIterator.next()
        }
        this.tableSelectSet = new Set()
        this.tableSelectAll = false
        await $MyLibDbc.favorite.batchRemove(favoriteIds)
      } else {
        const favoriteIds = new Set()
        for (const indexId of this.tableSelectSet) {
          favoriteIds.add(this.currentMap.get(indexId).favoriteId)
          this.currentMap.delete(indexId)
        }
        this.tableSelectSet = new Set()
        this.tableSelectAll = false
        await $MyLibDbc.favorite.batchRemove(favoriteIds)
      }
    },
    handleBatchRead() {
      if (this.tableSelectAll) {
        $MyLibWindowCommunication.sendToParent({ handle: 4, indexIds: [...this.currentMap.keys()] })
      } else {
        $MyLibWindowCommunication.sendToParent({ handle: 4, indexIds: [...this.tableSelectSet.values()] })
      }
    },
    handleBatchOpenMeta() {
      if (this.tableSelectAll) {
        $MyLibWindowCommunication.sendToParent({ handle: 2, indexIds: [...this.currentMap.keys()] })
      } else {
        $MyLibWindowCommunication.sendToParent({ handle: 2, indexIds: [...this.tableSelectSet.values()] })
      }
    },
    indexNameDetail(item) {
        const val = []
        val.push('<div style="display: flex;flex-wrap: wrap;flex-direction: column;">')
        for (const key of Object.keys(item)) {
            const name = indexFieldName.get(key)
            if (name)
                val.push(`<p><strong>${name}</strong>:&nbsp;${item[key]}</p>`)
        }
        val.push('</div>')
        ElMessageBox.alert(
            val.join(''),
            // '详情',
            {
                dangerouslyUseHTMLString: true,
                showConfirmButton: false,
                closeOnClickModal: true,
                showClose: false,
                draggable: true,
            }
        ).then(emptyFunction).catch(emptyFunction)
    }
  },
  computed: {
    currentMap() {
      switch (this.currentTabIndex) {
        case 1:
          return this.videoMap
        case 2:
          return this.videoCollectMap
        case 3:
          return this.pictureMap
        case 4:
          return this.textMap
        case 5:
          return this.textCollectMap
        case 6:
          return this.audioMap
        default:
          return new Map()
      }
    }
  },
  data() {
    return {
      currentTabIndex: 1,
      windowIsFocus: 1,
      mainHeight: 0,
      tableSelectSet: new Set(),
      tableSelectAll: false,
      tableSelection: false,
      /* video--start */
      videoMap: new Map(),
      videoCollectMap: new Map(),
      /* video--end */
      /* picture--start */
      pictureMap: new Map(),
      /* picture--end */
      /* text--start */
      textMap: new Map(),
      textCollectMap: new Map(),
      /* text--end */
      /* audio--start */
      audioMap: new Map(),
      /* audio--end */
    }
  }
};
</script>

<style>

html,
body,
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    text-align: center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.window-blur {
    /* 未选中颜色 */
    background-color: #323233;
}

.window-focus {
    /* 未选中颜色 */
    background-color: #3C3C3C;
}

.lib-favorite-base-form-item {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
}

.lib-favorite-base-form-item-select {
  width: 100% !important;
}

.lib-favorite-base-form-item .el-rate {
  height: auto !important;
  margin-left: 5px;
}

.lib-favorite-base-form-item .el-dropdown {
  margin-top: 5px;
  margin-left: 5px;
}

.lib-favorite-base-form-item-dropdown-menu,
.lib-favorite-base-form-item-dropdown-menu span {
  display: flex;
  align-items: center;
  text-align: center;
}

.lib-favorite-base-form-item .n-base-selection .n-base-selection-tags,
.lib-favorite-base-form-item .el-textarea,
.lib-favorite-base-form-item .el-input {
  --el-input-bg-color: rgb(60, 60, 60) !important;
  --n-color: rgb(60, 60, 60) !important;
  --el-input-border: 1px rgb(60, 60, 60) !important;
  --el-input-hover-border-color: #36ad6a !important;
}

.lib-favorite-base-form-item-title {
  margin: 0;
  margin-bottom: 5px;
  text-align: left;
}

#lib-favorite-base-form {
  padding-right: 20px;
  padding-left: 20px;
  width: 100%;
}

.lib-favorite-base-form-item-group {
  display: flex;
  justify-content: space-between;
}

#lib-favorite-header-button-group {
  display: flex;
  align-items: center;
  margin-right: 137px !important;
}



#lib-favorite-header-button-group .el-button {
  margin: 0 !important;
}

#lib-favorite-header-logo {
  display: flex;
  margin-left: 10px;
  align-items: center;
}

#lib-favorite-header-logo .el-icon {
  margin-right: 10px;
}
#lib-favorite-header-button-group .el-button {
  -webkit-app-region: no-drag;
}
#lib-favorite-header {
  -webkit-app-region: drag;
  width: 100%;
  height: 33px;
  display: flex;
  justify-content: space-between;
}


#lib-favorite-aside-tabs {
  display: flex;
}

#lib-favorite-aside-tabs-header {
  display: flex;
  flex-direction: column;
  background: #3C3F41;
  font-size: 12px;
}

.lib-favorite-aside-tabs-header-tab {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 5px;
  padding-left: 5px;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 12px;
  color: #BBBBBB;
}

.lib-favorite-aside-tabs-header-tab-hover:hover {
  background-color: #353739;
}

.lib-favorite-aside-tabs-header-tab-active {
  background-color: #2D2F30;
  color: white;
}

.lib-favorite-aside-tabs-header-tab-title {
  transform: rotate(-90deg);
  white-space: nowrap;
  margin: 0 !important;
}

.lib-favorite-aside-tab-pane {
  width: 100%;
  background-color: #1E1E1E;
  display: flex;
}

/* temp */
.el-message-box__header {
  padding: 0px !important;
}

.el-message-box__btns {
  padding: 0px !important;
}

#lib-favorite-description {
  box-shadow: none;
  overflow-y: scroll;
  height: 100% !important;
  border-radius: 0;
}

.lib-favorite-table {
  overflow-y: scroll;
  width: 100%;
  background-color: #1E1E1E;
}

.lib-favorite-table-row {
  width: auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: #1E1E1E;
  cursor: pointer;
  border-bottom: 0.5px solid #252526;
}

.lib-favorite-table-row-button-group .el-button {
  margin: 0;
}

.lib-favorite-table-row-button-group {
  flex-wrap: nowrap;
  display: flex;
}

.lib-favorite-table-row-box {
  padding-right: 5px;
  padding-left: 5px;
}

.lib-favorite-table-row-lock {
  background-color: #350104;
}

.lib-favorite-table-row-value {
  margin-left: 10px;
}

.lib-favorite-table-row-main {
  display: flex;
  align-items: center;
}

.lib-favorite-table-row-hover:hover {
  background-color: #333333;
}

#lib-favorite-cover-box {
  overflow-y: scroll;
  width: 100%;
  padding: 5px;
}

#lib-favorite-cover-box .el-upload-list--picture-card {
  --el-upload-list-picture-card-size: 100px !important;
}

#lib-favorite-cover-box-list {
  display: flex;
  justify-content: space-between;
}

#lib-favorite-cover-box-list .el-upload--picture-card {
  --el-upload-picture-card-size: 100px !important;
  --el-fill-color-lighter: rgb(60, 60, 60) !important;
}

#lib-favorite-cover-box-list .el-upload-list--picture-card {
  --el-upload-list-picture-card-size: 100px !important;
}

#lib-favorite-cover-box-list .el-upload-list__item {
  margin: 0 0 5px 0 !important;
}
</style>
